<template>
    <div class="sex-bar">
        <div :class="sex==0?'left':'left-hover'" @click="select(1)">
            <img v-if="sex == 1" src="@/assets/boy_selected@2x.png" class="no-selected" alt="">
            <img v-if="sex == 0" src="@/assets/boy@2x.png" class="no-selected" alt="">
            <span style="font-size: 18px;font-weight: 400;" :style="sex==1?'color:#58E4CB':'color: #c8c8c8'">男</span>
        </div>
        <div :class="sex==1?'right':'right-hover'" @click="select(0)">
            <img v-if="sex == 1" src="@/assets/girl@2x.png" class="no-selected" alt="">
            <img v-if="sex == 0" src="@/assets/girl_selected@2x.png" class="no-selected" alt="">
            <span style="font-size: 18px;font-weight: 400;" :style="sex==0?'color:rgba(253,111,113,1)':'color: #c8c8c8'">女</span>
        </div>
    </div>
</template>

<script>
    /* eslint-disable */
    export default {
        name: 'sex-select',
        data () {
            return {
                sex: 1
            }
        },
        methods: {
            select(num) {
                this.sex = num
            }
        }
    }
</script>

<style scoped>
    .no-selected{
        position: relative;
        width: 1.3125rem;
        height: 1.3125rem;
        /*bottom: 0.2rem;*/
        margin-right: 0.46875rem;
    }
    .sex-bar{
        width: 6rem;
        margin-left: 0.5rem;
        display: flex;
        justify-content: center;
    }
    .left{
        border: 0px solid #c8c8c8;
        height: 2.34375rem;
        border-bottom-width: 1px;
        display: flex;
        justify-content: center;
        align-items: center;
        /*background: url("../../assets/boy@2x.png") center no-repeat;*/
        /*background-size: contain;*/
        width: 50%;
    }
    .left-hover{
        border: 0px solid #58E4CB;
        border-bottom-width: 1px;
        height: 2.34375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        /*background: url("../../assets/boy_selected@2x.png") center no-repeat;*/
        /*background-size: contain;*/
        width: 50%;
    }
    .right{
        border: 0px solid #c8c8c8;
        border-bottom-width: 1px;
        height: 2.34375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        /*background: url("../../assets/girl@2x.png") center no-repeat;*/
        /*background-size: contain;*/
        width: 50%;
    }
    .right-hover{
        border: 0px solid rgba(253,111,113,1);
        border-bottom-width: 1px;
        display: flex;
        justify-content: center;
        align-items: center;
        /*background: url("../../assets/girl_selected@2x.png") center no-repeat;*/
        /*background-size: contain;*/
        height: 2.34375rem;
        width: 50%;
    }
</style>
